import React from 'react';
import { Line } from '@ant-design/charts';
import styles from './index.less'; // css modules示例， 告诉 umi 编译这个 less
import { useAccess, Access, useModel, FormattedMessage } from 'umi';

function formatName(user: { firstName: string; lastName: string }) {
  return user.firstName + ' ' + user.lastName;
}

const user = {
  firstName: 'Harper',
  lastName: 'Perez',
};

const Demo: React.FC = () => {
  // 全局初始数据示例
  const { initialState } = useModel('@@initialState');

  // 使用环境变量示例
  console.log('REACT_APP_ENV', REACT_APP_ENV);
  console.log('API_URL', API_URL);

  // model数据流示例
  const message = useModel('demo');
  const { counter, add, minus } = useModel('counter', (ret) => ({
    counter: ret.counter,
    add: ret.increment,
    minus: ret.decrement,
  }));

  // 权限示例
  const access = useAccess();
  if (access.demoShow) {
    console.log('has demo access');
  }

  // 图表示例
  const data = [
    { year: '1991', value: 3 },
    { year: '1992', value: 4 },
    { year: '1993', value: 3.5 },
    { year: '1994', value: 5 },
    { year: '1995', value: 4.9 },
    { year: '1996', value: 6 },
    { year: '1997', value: 7 },
    { year: '1998', value: 9 },
    { year: '1999', value: 13 },
  ];
  const config = {
    data,
    height: 400,
    xField: 'year',
    yField: 'value',
    point: {
      size: 5,
      shape: 'diamond',
    },
  };

  return (
    <>
      <div className={styles.page}>
        {/* 多语言示例 */}
        <FormattedMessage id="pages.layouts.userLayout.title" />
        {/* 多语言示例 */}

        {/* 全局初始数据示例 */}
        <div>{initialState?.currentUser?.name}</div>
        {/* 全局初始数据示例 */}

        {/* 使用环境变量示例 */}
        <div>REACT_APP_ENV：{REACT_APP_ENV}</div>
        <div>API_URL：{API_URL}</div>
        {/* 使用环境变量示例 */}

        {/* model数据流示例 */}
        <div>{message}</div>
        <div>
          {counter}
          <button onClick={add}>add by 1</button>
          <button onClick={minus}>minus by 1</button>
        </div>
        {/* model数据流示例 */}

        {/* 权限示例 */}
        <Access accessible={access.demoShow} fallback={<div>Can not read demoAccess.</div>}>
          has demoAccess
        </Access>
        {/* 权限示例 */}

        <h1>Hello, {formatName(user)}!</h1>

        {/* css modules示例 */}
        <text className={styles.myLink}>this is a page</text>
        {/* css modules示例 */}

        {/* 图表示例 */}
        <Line {...config} />
        {/* 图表示例 */}
      </div>
    </>
  );
};

export default Demo;
